<!-- 注册 -->
<template>
    <IonPage>
        <IonContent>
            <div class="main">
                <RouterLink to="/" @click="toLogin"><img src="/src/assets/images/return.png" alt=""></RouterLink>
                <div>
                    <p class="hi">Hi!</p>
                </div>
                <input type="text" class="input_user" placeholder="用户名" maxlength="20" v-model="user">
                <input type="password" class="input_pwd" placeholder="密码" maxlength="20" v-model="pwd">
                <input type="password" class="input_pwd" placeholder="确认密码" maxlength="20" v-model="ok_pwd">
                <RouterLink to="/" @click="returnToLogin"><button class="btn_register">注册</button></RouterLink>
            </div>
        </IonContent>
    </IonPage>
</template>
<style scoped>
.main img:nth-of-type(1) {
    width: 10vw;
}

.hi {
    color: gray;
    font-size: 35px;
    margin-top: 5vh;
    margin-left: 10vw;
}

.input_user {
    margin: auto;
    margin-top: 20vh;
    width: 70vw;
    /* 块级元素会换行 */
    display: block;
    border: 0vw;
    border-bottom: 0.5vw solid black;
    font-size: 5vw;
    outline: none;
}

.input_pwd {
    margin: auto;
    margin-top: 7vh;
    width: 70vw;
    /* 块级元素会换行 */
    display: block;
    border: 0vw;
    border-bottom: 0.5vw solid black;
    font-size: 5vw;
    outline: none;
}

.btn_register {
    width: 50vw;
    height: 8vh;
    font-size: 7vw;
    background-color: #3498db;
    border: 0vw;
    margin-top: 10vh;
    border-radius: 20vw;
    margin-left: 20vw;
}

.account {
    font-size: 5vw;
    color: gray;
}
</style>
<script setup lang="ts">
import { IonText, IonPage, IonContent } from '@ionic/vue';
import { ref } from 'vue';

let user = ref('')
let pwd = ref('')
let ok_pwd = ref('')
let isCanReturn = true
const returnToLogin = () => {
    // 当点击之后进行判断isCanReturn是否
    // isCanReturn = false
    if (user.value === '') {
        alert("用户名错误")
        isCanReturn = false

    }
    else if (pwd.value === '') {
        alert("密码错误")
        isCanReturn = false

    }
    else if (ok_pwd.value === '' || ok_pwd != pwd) {
        alert("确认密码错误")
        isCanReturn = false

    }
    // else if (to.path === '/') {
    //     isCanReturn = false

    // }
}
const toLogin = () => {
    // $router.replace('/')
    isCanReturn = true



}
// const beforeRouteLeave = (to, from) => {
//     if (isCanReturn === false) {
//         // isCanReturn=true
//         return false
//     }
// }

</script>